<template>
  <view @touchstart="handleTouchstart" @touchend="handleTouchend"> </view>
</template>

<script>
export default {
  data() {
    return {
      //按下的时间
      startTime: 0,
      //按下的坐标
      startX: 0,
      startY: 0,
    };
  },
  methods: {
    /*用户按下屏幕
      1.记录用户按下屏幕的时间  Date.now() 时间戳 返回 1970-1-1到现在的毫秒数
      2.记录用户按下屏幕的坐标x和y
    */
    handleTouchstart(e) {
      //记录用户按下的时间
      this.startTime = Date.now();
      //记录用户按下的坐标
      this.startX = e.changedTouches[0].clientX;
      this.startY = e.changedTouches[0].clientY;
    },
    handleTouchend(e) {
      const endTime = Date.now();
      const endX = e.changedTouches[0].clientX;
      const endY = e.changedTouches[0].clientY;

      //判断按下的时长
      if (endTime - this.startTime > 2000) {
        return;
      }

      //滑动的方向
      let direction = "";

      //先判断用户滑动的距离  用[绝对值 ] 是否合法  合法：判断滑动的方向
      if (Math.abs(endX - this.startX) > 10) {
        //滑动方向  结束大于

        direction = endX - this.startX > 0 ? "right" : "left";
      } else {
        return;
      }

      console.log(direction);
    },
  },
};
</script>

<style>
view {
  width: 100%;
  height: 500rpx;
  background-color: aqua;
}
</style>
